<template>
  <div>
    <el-button @click="addList">添加</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="city" label="市区" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="id" label="身份证号"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
          <!-- scope.row:当前数据  -->
          <el-button type="text" size="small" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- total：数据总条数 -->
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="changeCurrent">
    </el-pagination>


    <!-- 添加 编辑弹框 -->
    <el-dialog title="添加/编辑" :visible.sync="dialogVisible" width="30%">
      <div class="dialog-body">
        <!-- 编辑的内容  或者添加的内容 -->
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="pass">
            <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="市区" prop="pass">
            <el-input v-model="ruleForm.city" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="地址" prop="pass">
            <el-input v-model="ruleForm.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { apiGetList, apiDel, apiAddList, apiEdit } from "@/api";
export default {
  data() {
    return {
      page: {
        current: 1,
        size: 10
      },
      total: 0,
      ruleForm: {}, // 表单中的数据
      tableData: [],
      dialogVisible: false, // 弹框的显示与隐藏
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      apiGetList(this.page).then((res) => {
        this.tableData = res.data;
        this.total = res.total
      });
    },
    // 改变页码
    changeCurrent(e) {

      // 对象的浅拷贝
      this.page = {...this.page, current: e}
    
      this.getList()
    },

    handleClick() {},
    // 添加
    addList() {
      // 打开弹框
      this.dialogVisible = true;
    },
    // 弹框确定
    dialogOk() {
      // 判断编辑还是新增
      if (this.ruleForm.id) {
        // 编辑
        apiEdit(this.ruleForm).then((res) => {
          this.getList();
        });
      } else {
        apiAddList(this.ruleForm).then((res) => {
          this.getList();
        });
      }

      // 清空弹框中的数据
      this.ruleForm = {};
      // 关闭弹框
      this.dialogVisible = false;
    },
    // 删除
    del(data) {
      apiDel({ id: data.id }).then((res) => {
        this.getList();
      });
    },
    // 编辑
    edit(data) {
      // 将data赋值给ruleFrom
      // 如果 this.ruleForm = data ：内存地址 没有发生变化  当ruleForm改变的时候  data也会发生改变
      // this.ruleForm = {...data}: 解构赋值 可以使内存地址发生变化，当ruleForm改变的时候  data不会改变
      this.ruleForm = { ...data };

      // 打开弹框
      this.dialogVisible = true;
    },
  },
};
</script>